<template>
  <div id="main">
    <b>个人信息修改</b>
    <br>
    <hr>
    <br>
    <table class="table table-striped table-hover">
      <tr>
        <td width="100"></td>
        <td width="100"><b> 用户名</b> </td>
        <td width="200"> <b>联系方式 </b> </td>
        <td width="200"> <b>预约信息</b>   </td>
      </tr>
      <tr v-for="item in olist.slice(userId-5,userId-4)">
        <td width="100"></td>
        <td width="100">{{item.name}}</td>
        <td width="200">{{item.contactInformation}} </td>
        <td width="200">{{item.appointmentInformation}} </td>
        <td><button type = "button" class="btn btn-link " data-toggle="modal" data-target="#reModal"  @click="update(item)">修改</button></td>
      </tr>
    </table>
    <hr size="2">
    <br>
    <b>登录设置</b>
    <hr>
    <table  class="table table-striped table-hover">
      <tr>
        <td width="100"></td>
        <td width="100"> <b>用户名</b> </td>
        <td width="200"> <b>密码</b> </td>

      </tr>
      <tr v-for="item in ulist.slice(userId-1,userId)">
        <td width="100"></td>
        <td width="100">{{item.username}}</td>
        <td width="200">{{item.password}} </td>

        <td><button type = "button" class="btn btn-link" data-toggle="modal" data-target="#reModaluser"  @click="updateuser(item)">修改密码</button></td>
      </tr>
    </table>


    <div class="modal fade" id="reModaluser" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">修改</h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
            用户名：<input type="text" hidden="true" v-model="uobj.username"><br>
            密码：<input type="text" v-model="uobj.password"><br>
            ID
            <select type="text"  hidden="true" v-model="uobj.actor"  placeholder="请选择" >
              <option  v-for="item in alist" :value="item">{{item.id}}</option>
            </select><br>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" @click = "okupdateuser()">提交</button>
          </div>
        </div>
      </div>
    </div>



    <div class="modal fade" id="reModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">修改</h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
            用户编号：<input type="text" v-model="obj.no"><br>
            用户名：<input type="text" v-model="obj.name"><br>
            联系方式：<input type="text" v-model="obj.contactInformation"><br>
            预约信息：<input type="text" v-model="obj.appointmentInformation"><br>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" @click = "okupdate()">提交</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

    import axios from 'axios';

    export default {
        name: "PersonalCenter",

        data: function () {

            return  {

                username:window.localStorage.getItem('userName'),
                userId:window.localStorage.getItem('userId'),
                ordinaryurl:this.baseURL+'ordinaryUser.ctl',
                userurl:this.baseURL+'users.ctl',
                aurl:this.baseURL+'actor.ctl',
                olist:[],
                ulist:[],
                alist:[],
                obj:{},
                uobj:{},
                keyword:'',
                size:4,
                current:1,
                total:0,
                allpage:0,

            }
        },
        created(){
            axios.get(this.ordinaryurl).then((res) => {
                this.olist=res.data;
            })

            axios.get(this.userurl).then((res) => {
                this.ulist=res.data;
            })
            axios.get(this.aurl).then((res) => {
                this.alist=res.data;
            })
        },
        methods:{

            update:function(reobj){
                this.obj=reobj;
            },
            updateuser:function(reobj){
                this.uobj=reobj;
            },
            okupdateuser:function(){
                axios.put(this.userurl,this.uobj)
                    .then(res=>{
                        alert("修改成功");
                        this.uobj={};
                    })
                $("#reModaluser").modal('hide');
            },

            okupdate:function(){
                axios.put(this.ordinaryurl,this.obj)
                    .then(res=>{

                        alert("修改成功");
                        this.obj={};
                    })
                $("#reModal").modal('hide');
            },
        }
    }
</script>

<style scoped>
  .color{
    background-color:#E6E6E6; color: #555555}
  #main{padding:5px;}
  .modal-body{
    text-align: center;
    position: relative;
    line-height: 50px;
    padding-left:50px;
  }
  .modal-body input{
    height:28px;
  }
</style>
